<template>
  <div id="contsainer"></div>
</template>
<script>
import image from './image/1.jpg'

export default {
  data() {
    return {
      viewer: null
    }
  },
  mounted() {
    this.initCesium()
    this.addViewportQuad()
  },
  methods: {
    initCesium() {
      this.viewer = new Cesium.Viewer('contsainer', {
        animation: false,
        baseLayerPicker: false,
        fullscreenButton: false,
        geocoder: false,
        homeButton: false,
        infoBox: false,
        sceneModePicker: false,
        navigationHelpButton: false,
        scene3DOnly: true,
        timeline: false,
        selectionIndicator: false, //是否显示选取指示器组件
        shouldAnimate: false, //自动播放动画控件
        shadows: true, //是否显示光照投射的阴影
        terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY, //地质接收阴影
        sceneMode: Cesium.SceneMode.SCENE3D
      })
      this.viewer._cesiumWidget._creditContainer.style.display = 'none' //	去除版权信息
    },
    addViewportQuad() {
      let viewportQuad = new Cesium.ViewportQuad()
      //添加视口的矩形 BoundingRectangle(x,y,width,height) x,y代表左下角的起始位置
      viewportQuad.rectangle = new Cesium.BoundingRectangle(500, 100, 200, 200)
      //添加fabricMaterial,自定义的材质
      viewportQuad.material = new Cesium.Material({
        fabric: {
          type: 'Image', //指定材质的类型
          uniforms: {
            image: image //给材质的变量传参，传入的一张图片
          }
        }
      })
      //将视口矩形添加到场景中的图元
      this.viewer.scene.primitives.add(viewportQuad)
    }
  }
}
</script>
<style scoped>
#contsainer {
  height: 100%;
  width: 100%;
  background-color: red;
}
</style>
